<template>
	<view class="content">
		<!-- <view class="header">
			<view class="header-left">
				<image src="/static/close.png" mode="" @tap="close"></image>
				<span>隐患跟踪</span>
			</view>
			<view class="header-right">
				<image src="../../../static/dian.png" mode=""></image>
			</view>
		</view> -->
		<view class="ipts">
			<view class="info-item">
				<view class="dot"></view>
				<span>隐患编号</span>
				<input v-model="userinfo.no" type="text" disabled placeholder-class="place-class">
			</view>
			<view class="info-item">
				<view class="dot"></view>
				<span>上传人</span>
				<input  type="text" disabled placeholder-class="place-class">
			</view>
			
			<view class="info-item">
				<view class="info-item-left">
					<view class="dot"></view>
					<span>上传日期</span>
				</view>
				<text style="color: #999999;font-size: 24rpx;">{{userinfo.create_time}}</text>
				<!-- <picker mode="date" :value="date" :start="startDate" :end="endDate" @change="bindDateChange">
					<view class="uni-input">{{date}}</view>
				</picker> -->
				<!-- <input type="text" placeholder="07.24-07.30" placeholder-class="place-class"> -->
			</view>
			
			<view class="info-item">
				<view class="dot"></view>
				<span>隐患地址</span>
				<input disabled v-model="userinfo.address" type="text" placeholder-class="place-class">
				<image src="/static/qxsb.png" mode="" style="width: 40rpx; height: 40rpx;" @click="tapMap(lat,long)"></image>
			</view>
			<view class="info-item">
				<view class="dot"></view>
				<span>隐患来源</span>
				<input disabled v-model="userinfo.source_type" type="text" placeholder-class="place-class">
			</view>
			
			<view class="info-item">
				<view class="dot"></view>
				<span>隐患类别</span>
				<input disabled v-model="userinfo.source" type="text" placeholder-class="place-class">
			</view>
			
			<view class="info-item">
				<view class="dot"></view>
				<span>隐患类型</span>
				<input disabled v-model="userinfo.classify" type="text" placeholder-class="place-class">
			</view>
			
			<view class="info-item">
				<view class="dot"></view>
				<span>隐患分级</span>
				<input disabled  type="text" placeholder-class="place-class">
			</view>
			
			<view class="info-item">
				<view class="dot"></view>
				<span>隐患描述</span>
				<input disabled v-model="userinfo.description" type="text" placeholder-class="place-class">
			</view>
			
			<view class="info-item">
				<view class="info-item-left">
					<view class="dot"></view>
					<span>隐患照片</span>
				</view>
				<view class="contimg">
					<view  v-if="userinfo.picture_1"  class="danger-img">
						<image :src="url+userinfo.picture_1" mode="" @tap="seeimg($url+userinfo.picture_1)" ></image>
					</view>
					<view class="danger-img" v-if="userinfo.picture_2"> 
						<image  :src="url+userinfo.picture_2" mode="" @tap="seeimg($url+userinfo.picture_2)" ></image>
					</view>
					<view class="danger-img" v-if="userinfo.picture_3">
						<image  :src="url + userinfo.picture_3" mode="" @tap="seeimg($url + userinfo.picture_3)" ></image>
					</view>
				</view>
			</view>
		</view>
		<!-- 期限 -->
		<view class="ipts">
			<view class="info-item">
				<view class="dot"></view>
				<span>整改期限</span>
				<input type="text" v-model="userinfo.create_time + '-' + userinfo.deadline_time" disabled placeholder-class="place-class">
			</view>
		</view>
		<!-- 处理情况 -->
		
		<view class="ipts" v-if="instalrets">
			 
			<view class="info-item">
				<view class="info-item-left">
					<view class="dot"></view>
					<span>处理情况</span>
				</view>
				<view class="danger-img-box">
					{{instalrets.handel_msg}}
				</view>
				
			</view>
			
			
			
			<view class="info-item">
				<view class="info-item-left">
					<view class="dot"></view>
					<span>处理照片</span>
				</view>
				<view class="danger-img-box">
					<view class="danger-img">
						<image class="realImg" :src='$url + instalrets.handel_picture' @click="seeimg($url + instalrets.handel_picture)"></image>
					</view>
				</view>
				
			</view>
		</view>
		
		
		<view class="ipts" v-else>
			<view class="info-item">
				<view class="dot"></view>
				<span>处理情况</span>
				<input v-model="handleText" type="text" placeholder="请输入处理情况" placeholder-class="place-class">
			</view>
			
			<view class="info-item">
				<view class="info-item-left">
					<view class="dot"></view>
					<span>处理照片</span>
				</view>
				<view class="danger-img-box">
					<view class="danger-img" v-if="!img1" @tap="changeImg">
						<u-icon name="plus"  size="28" style="display: flex;justify-content: center;margin-top: 20rpx;"></u-icon>
						<!-- <image class="add" src="/static/jiahao.png" mode="" @click="changeImg"></image> -->
					</view>
					<view class="danger-img" v-else>
						<image class="delet" src="/static/delet.png" mode="" @tap="deletImg"></image>
						<image class="realImg" :src='img1' @tap="seeimg(img1)"></image>
					</view>
				</view>
				
			</view>
		</view>
		<!-- 隐患是否持续跟踪 -->
		<view class="ipts">
			<view class="info-item">
				<view class="info-item-left">
					<view class="dot"></view>
					<span>隐患是否持续跟踪</span>
				</view>
				<view class="danger-img-box">
					<switch :checked="isChecked" @change="isChecked = !isChecked" style="transform:scale(0.7)" />
				</view>
			</view>
		</view>
		<!-- 跟踪记录 -->
		<view class="ipts">
			<view class="record" v-if="!installList">
				<image src="/static/jilu.png" mode=""></image>
				<span>跟踪记录</span>
			</view>
			<bloak v-for="(item,index) in installList" :key="index">
				<view class="record-item">
					<view class="record-item-left">
						<span class="shu"></span>
						<span class="title">{{item.staff_info.realname}}</span>
						<span class="time">{{item.addtime}}</span>
					</view>
					<view class="record-item-right">
						<image class="dianhua" src="/static/dianhua.png" mode=""></image>
						<span class="title">{{item.staff_info.mobile}}</span>
						<image class="zhankai" src="/static/zhankai.png" mode="" @click="showRecord"></image>
					</view>
				</view>
				<view v-if="showR">
					<view class="info-item">
						<view class="dot"></view>
						<span>处理情况</span>
						<input disabled v-model="item.content" type="text" placeholder="07.24-07.30" placeholder-class="place-class">
					</view>
					
					<view class="info-item">
						<view class="info-item-left">
							<view class="dot"></view>
							<span>处理照片</span>
						</view>
						<view class="danger-img-box">
							<view class="danger-img">
								<image :src="$url + item.pic" mode=""  @click="seeimg($url + item.pic)"></image>
							</view>
						</view>
						
					</view>
				</view>
			</bloak>
		</view>
		<!-- <view class="btn">立即登录</view> -->
		<view class="btns">
			<view class="btn1 consel" @click="handleSubmint1">上传跟踪</view>
			<view class="btn1 save" @click="handleSubmint">跟踪完成</view>
		</view>
		<cpimg ref="cpimg" @result="cpimgOk" @err="cpimgErr" :number="1" :fixOrientation="true" :size="500" :maxWidth="800" :ql="0.7" type="url" />
		
	</view>
</template>

<script>
	export default {
		
		data() {
			const currentDate = this.getDate({
				format: true
			})
			return {
				isChecked: true,
				url :'https://wqzsgas.com/',
				img1:null, //处理照片的路径
				date: currentDate,
				showR:true,
				username: '',
				password: '',
				// array: ['安装工','检测工','维修工'],
				index: 0,
				userinfo:{},
				value:'',  //搜索关键词
				installList:[],  //安装列表
				dosearch:false,
				showAcount:false,
				dangerId: '',
				handleText: '',
				fileImg:'',
				long :'',
				lat :'',
				instalrets:''
			};
		},
		computed: {
			startDate() {
				return this.getDate('start');
			},
			endDate() {
				return this.getDate('end');
			}
		},
		onLoad(option) {
			this.dangerId = option.id
		},
		onShow() {
			uni.getStorage({
				key: 'token'
			}).then(da => {
				this.token = da[1].data
			})
			setTimeout(() => {
				this.getInstallDetail()
				this.getMap()
			},10)
		},
	
		methods: {
			//图片预览
			seeimg(img){
				uni.previewImage({
					urls: [img],
					longPressActions: {
						itemList: [],
						success: function(data) {
							console.log('选中了第' + (data.tapIndex + 1) + '个按钮,第' + (data.index + 1) + '张图片');
						},
						fail: function(err) {
							console.log(err.errMsg);
						}
					}
				});
			},
			
			// 选择气表照片
			
			changeImg(ret) {
				var that = this;
				that.$refs.cpimg._changImg()
				 
			},
			cpimgOk(file) {
				let that = this
				uni.showLoading({
					title:'上传中...'
				})
			
				// 上传图片
				uni.uploadFile({
					// url:'https://trq.aoaojiao.online/api/common/upload',
					url: that.$fileImg + '/common/upload',
					filePath: file[0],
					name: 'file',
					formData:{
						token: that.token,
						no_water: 1
					},
					success(res1) {
						let dataPath = JSON.parse(res1.data)
						if(dataPath.code == 1) {
								that.fileImg = dataPath.data.url
								that.img1 =file[0]
						}
						
							uni.hideLoading()
						}
						,fail:()=>{
						   uni.hideLoading()
							 uni.showToast({
								title:'上传失败'
							 })
						}
				});
   
			},
			
			tapMap(lat,long){
				uni.navigateTo({
					url: '/pages/safety/maps/maps?lat=' + lat + '&long=' + long
				})
			},
			//获取地理位置
			getMap() {
				 let that = this
					uni.getLocation({
					type: 'wgs84',
					success: function (res) {
					that.long = res.longitude
					that.lat = res.latitude
					}
					 });
			},
			close(){
				uni.navigateTo({
					url:'../index/index'
				})
			},
			// 选择日期
			bindDateChange: function(e) {
				this.date = e.target.value
			},
			getDate(type) {
				const date = new Date();
				let year = date.getFullYear();
				let month = date.getMonth() + 1;
				let day = date.getDate();
	
				if (type === 'start') {
					year = year - 60;
				} else if (type === 'end') {
					year = year + 2;
				}
				month = month > 9 ? month : '0' + month;;
				day = day > 9 ? day : '0' + day;
				return `${year}-${month}-${day}`;
			},
			// 获取安装数据
			getInstallDetail () {
				let that = this
				that.$request.request({
					url: 'danger/danger_detail',
					method: 'POST',
					data: {
						token: that.token,
						danger_id: that.dangerId
					}
				}).then(res => {
					if(res.data.code == 1) {
						that.userinfo = res.data.data.info
						console.log(res.data.data.info)
						that.installList = res.data.data.detail
						that.instalrets = res.data.data.result
					}
				})
			 },
			 // 删除图片
			 deletImg(){
				 this.img1=''
			 },
			 // 选择图片
			/* changeImg() {
				var that = this;
				uni.chooseImage({
					count: 1,
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album'], //从相册选择
					success: function(res) {
						uni.uploadFile({
							url: that.$fileImg + '/common/upload',
							filePath: res.tempFilePaths[0],
							name: 'file',
							formData:{
								token: that.token,
								no_water: 1
							},
							success(res1) {
								let dataPath = JSON.parse(res1.data)
								if(dataPath.code == 1) {
									that.fileImg = dataPath.data.url
									that.img1 = res.tempFilePaths[0]
								}
							}
						});
					}
				});
			}, */
			handleSubmint1(){
				let that = this
				if(that.handleText == '') {
					uni.showToast({
						title: '请输入处理情况',
						icon: 'none'
					})
					return
				}
				if(that.img1 == null) {
					uni.showToast({
						title: '请上传处理照片',
						icon: 'none'
					})
					return
				}
				that.$request.request({
					url: '/danger/danger_continue',
					method: 'POST',
					data: {
						danger_id: that.dangerId,
						token:that.token,
						picture: that.fileImg,
						content: that.handleText,
						long : that.long,
						lat : that.lat ,
					}
				}).then(res => {
					if(res.data.code == 1) {
						uni.showToast({
							title: res.data.msg,
							icon: 'none'
						})
					}else{
						uni.showToast({
							title: res.data.msg,
							icon: 'none'
						})
					}
				})
			},
			handleSubmint() {
				let that = this
				if(that.handleText == '') {
					uni.showToast({
						title: '请输入处理情况',
						icon: 'none'
					})
					return
				}
				if(that.img1 == null) {
					uni.showToast({
						title: '请上传处理照片',
						icon: 'none'
					})
					return
				}
				that.$request.request({
					url: '/danger/danger_commit',
					method: 'POST',
					data: {
						danger_id: that.dangerId,
						token:that.token,
						handel_picture:that.fileImg,
						handel_msg: that.handleText,
						long : that.long,
						lat : that.lat ,
					}
				}).then(res => {
					if(res.data.code == 1) {
						uni.showToast({
							title: res.data.msg,
							icon: 'none'
						})
					}else{
						uni.showToast({
							title: res.data.msg,
							icon: 'none'
						})
					}
				})
			}
		},
		
	}
</script>

<style lang="scss" scoped>
	.content{
		position:relative;
		padding-bottom: 140rpx;
		background:  #F1F1F1;
	}
	.uni-input{
		padding: 0;
	}
	.contimg{
		display: flex;
	}
	// header
	.header{
		display: flex;
		justify-content:space-between;
		align-items: center;
		padding: 30rpx 30rpx;
		background-color: #fff;
		.header-left{
			display: flex;
			align-items: center;
			font-size: 32rpx;
			font-weight: 500;
			color: #333;
			image{
				width: 24rpx;
				height: 24rpx;
				margin-right: 20rpx;
			}
		}
		.header-right{
			display: flex;
			align-items: center;
			font-size: 24rpx;
			color: #333;
			image{
				width: 52rpx;
				height: 52rpx;
				margin-right: 10rpx;
			}
		}
	}
	.ipts{
		background-color: #fff;
		margin-top: 30rpx;
	}
	.info-item{
		box-sizing: border-box;
		display: flex;
		align-items: center;
		justify-content: space-between;
		// height: 72rpx;
		width: 100%;
		padding: 0rpx 32rpx;
		height: 100rpx;
		align-items: center;
		background-color: #fff;
		font-size: 28rpx;
		color: #333;
		border-bottom: 1rpx solid #DDDDDD;
		input{
			flex: 1;
			text-align: right;
			color: #999999;
			font-size: 28rpx;
		}
		.dot{
			width: 8rpx;
			height: 8rpx;
			background-color: #003690;
			border-radius: 50%;
			margin-right: 10rpx;
		}
		.danger-img{
			position: relative;
			width: 75rpx;
			height: 75rpx;
			border: 2rpx dashed #eee;
			margin-right: 10rpx;
			
			image{
				width: 100%;
				height: 100%;
			}
			.delet{
				position: absolute;
				top: -12rpx;
				right: -12rpx;
				width: 24rpx;
				height: 24rpx;
				z-index: 999;
			}
		}
		.danger-img-box{
			display: flex;
		}
		
		.info-item-left{
			display: flex;
			align-items: center;
			font-size: 28rpx;
		}
	}
	.hengxian{
		width: 700rpx;
		height: 2rpx;
		background-color:  #eee;
		margin: 20rpx auto;
	}
	.place-class{
		font-size: 26rpx;
		color: #999;
	}
	.btn{
		width: 646rpx;
		height: 80rpx;
		margin: 74rpx auto;
		text-align: center;
		line-height: 80rpx;
		border-radius: 40rpx;
		background-image: linear-gradient(to bottom, #2366D5, #001B48);
		font-size: 32rpx;
		color: #E5EFFE;
	}
	.btns{
		position: fixed;
		bottom: 0;
		display: flex;
		width: 100%;
		.btn1{
			width: 50%;
			height: 96rpx;
			line-height: 96rpx;
			text-align: center;
			font-size: 24rpx;
		}
		.consel{
			background-color: #e9e9e9;
			color: #777;
		}
		.save{
			background-color: #003690;
			color: #fff;
		}
	}
	.btn:active{
		background: rgba(0,0,0,0.4);
	}
	.record{
		display: flex;
		align-items: center;
		color: #003690;
		font-size: 24rpx;
		margin-top: 20rpx;
		image{
			width: 32rpx;
			height: 32rpx;
			margin: 0 20rpx 0 30rpx;
		}
		span{
			font-weight: 700;
		}
	}
	.record-item{
		display: flex;
		justify-content: space-between;
		padding: 10rpx 30rpx;
		border-bottom: 2rpx solid #eee;
		.record-item-left{
			display: flex;
			align-items: center;
			.shu{
				width: 8rpx;
				height: 28rpx;
				background-color: #003690;
				border-radius: 8rpx;
			}
			.title{
				font-size: 32rpx;
				color: #333;
				font-weight: 500;
				margin: 0 10rpx;
			}
			.time{
				font-size: 24rpx;
				color: #777;
			}
		}
		.record-item-right{
			display: flex;
			align-items: center;
			.dianhua{
				width: 28rpx;
				height: 28rpx;
			}
			.zhankai{
				width: 36rpx;
				height: 36rpx;
			}
			.title{
				font-size: 32rpx;
				color: #555;
				font-weight: 500;
				margin: 0 10rpx;
			}
		}
	}
</style>
